<template>
  <div id="footer" class="container-fluid">
    <div class="qrCode">
      <img src="/public/qrcode_facebook.png" alt="QR Code" />
    </div>
    <div class="footer-row">
      <div class="logo">
        <img src="/public/logo-AVERTEX.svg" alt="logo图"  STYLE="height: 100px;width: 100px"/>
      </div>
      <div class="contact-us">CONTACT US</div>
    </div>
  <div class="line"></div>
    <div class="info">
      <div class="info-item">ADDRESS: Room 428, Xinkangwei Center, 27th Fuqian Road, Xintang Town, ZengCheng District, Guangzhou, China 511340</div>
      <div class="info-item">EMAIL: vincent@vlitcoltd.com</div>
      <div class="info-item">Contact Number: +8613642696524</div>
    </div>
  </div>
</template>


<style scoped>
#footer {
  display: flex;            /* 使用 Flexbox 布局 */
  flex-direction: column;   /* 垂直排列子元素 */
  align-items: center;      /* 水平居中 */
  justify-content: center;  /* 垂直居中 */
  width: 100%;
  height: auto;             /* 自适应高度 */
  padding: 20px;            /* 添加内边距 */
  color: #fff;
  background: #474747;
  overflow: hidden;
  text-align: center;
  gap: 10px;
}

.footer-row {
  display: flex;            /* 横向排列子元素 */
  align-items: center;      /* 垂直方向居中 */
  gap: 20px;                /* 设置元素之间的间距 */
  margin-bottom: 10px;      /* 与下方白线的间距 */
}

.qrCode img {
  max-width: 95px;          /* 设置二维码最大宽度为 80px，比 logo 更小 */
  height: auto;             /* 高度自动调整以保持宽高比 */
  margin-bottom: 10px;      /* 与下方文字的间距 */
}


.contact-us {
  font-size: 18px;          /* 文字大小 */
  font-weight: bold;        /* 加粗 */
  color: #fff;
  padding-bottom: 10px;
  /* 文字颜色 */
}

.line {
  width: 80%;               /* 白线宽度为父组件的 80% */
  height: 2px;              /* 白线高度 */
  background-color: #fff;   /* 白线颜色 */
  margin: 10px 0;           /* 与上下元素的间距 */
}

.info {
  display: flex;            /* 使用 Flexbox 布局 */
  flex-direction: column;   /* 垂直排列子元素 */
  align-items: center;      /* 水平居中 */
  gap: 10px;                /* 每行之间的间距 */
}

.info-item {
  font-size: 14px;          /* 信息文本大小 */
  color: #fff;              /* 文本颜色 */
  text-align: center;       /* 文本居中 */
  line-height: 1.5;         /* 行间距 */
}
</style>



